<template>
    <el-container>
        <el-header height="250"><div></div></el-header>
        <el-main>
            <div class="login-wrap">
                <div class="ms-login">
                    <!-- <img src="../../../static/img/login/loginlogo.png"> -->
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                        <el-form-item prop="username">
                            <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>

                    </el-form>
                </div>
            </div>
        </el-main>
        <div class="footer" v-html="copyright"></div>
    </el-container>
</template>

<script>
    import {  apiLogin, apiSTForSite, apiCasCall,setCookie} from './../tool/Global/app-mgr.js'
    import { copyright,LoginConfig} from './../tool/Global/app-config.js'

     //修改为监测经协系统是否已经登陆
    import {apiGetUserInfo} from "../tool/Global/app-login-module.js";

    let selfs = null;
    export default {
        data: function(){
            return {
                copyright: copyright,
                ruleForm: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            submitForm(formName) {
                selfs = this;
                const self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let username = this.ruleForm.username;
                        let password = this.ruleForm.password;
                        this.getTicket(username,password);
                    } else {
                        console.log('输入有误!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getTicket: async function(username,password) {
                const self = this;
                let login = null;
                try{
                    login = await apiLogin({username,password});
                } catch (e){
                    console.log("登录失败了"+e)
                    self.$message.error('用户名密码错误！请重新输入');
                    return;
                }
                let TGT = login.data.replace(/.*action=.*\/(.*?)\".*/ig, "$1");
                setCookie("CASTGCTMP", TGT);
                let sites = LoginConfig.sites;
                for (let i = 0; i < sites.length; i++) {
                    try {
                            let st = await apiSTForSite(TGT, sites[i]);
                            let call = await apiCasCall(sites[i], st.data);
                        } catch (e) {
                            console.error(e);
                        }
                }
                self.$router.push('/home');
            },
            getUser() {
                let self = this;
                apiGetUserInfo().then((res)=>{
                    if(res.data.status){
                        let userInfo = res.data.user;
                        self.username = userInfo.userCaption;
                        self.$router.push('/home');
                    }
                }).catch((e)=>{
                })
            }
        },
        created() {
            this.getUser();
        }
    }

</script>



<style scoped>
    .login-wrap{
        position: relative;
        width:100%;
        height:100%;
        background-image: url(../../../static/img/login/login.png);
        background-repeat: no-repeat;
        background-color: white;
    }
    .ms-login{
        position: relative;
        left: 1028px;
        top: 15px;
        width: 629px;
        height: 613px;
        background-repeat: no-repeat;
        background-image: url(../../../static/img/login/loginbg2.png); 
    }
    .login-btn{
        text-align: center;
    }
    .login-btn button{
        width:100%;
        height:36px;
    }
    .el-form {
        padding: 278px 210px 0 170px;
    }
    .ms-login img{
        margin-top: 65px;
        margin-bottom: 20px;
    }
    .el-header div{
        height: 85px;
        background-repeat: no-repeat;
        margin: 1% 0 1% 10%;
        background-image: url(../../../static/img/login/banner.png);
    }

    .el-footer {
        background-color: #7d8185;
        color: #fff;
        text-align: center;
        line-height: 60px;
    }

    .el-main {
        text-align: center;
        padding: 0px;
        overflow: hidden;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container {
        height: 100%;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    .footer{
            line-height: 28px;
    background-color: #088cde;
    margin-top: 126px;
    text-align: center;
    color: #fdfdfd;
    padding: 13px 0px;
    }
</style>
